<template>
	<view class="history">
		<u-row style="padding-top: 10rpx;">
			<u-col span="0.5" class="back" justify="center" align="center" @click="backIndex">
				<u-icon name="arrow-left" size="20"></u-icon>
			</u-col>
			<u-col span="11">
				<u-text text="历史记录" align="center" bold size="20"></u-text>
			</u-col>
		</u-row>
		<view class="outer">
			<view class="container">
				<u-row>
					<u-col span="2">
						<u-text text="记录名称" bold align="center"></u-text>
					</u-col>
					<u-col span="3.5">
						<u-text text="轮胎气压值" bold align="center"></u-text>
					</u-col>
					<u-col span="2">
						<u-text text="轮胎状态" bold align="center"></u-text>
					</u-col>
					<u-col span="2">
						<u-text text="是否发出警报" bold align="center"></u-text>
					</u-col>
					<u-col span="2.5">
						<u-text text="记录时间" bold align="center"></u-text>
					</u-col>
				</u-row>
				<view class="content">
					<u-row v-for="i in pressureList" class="item">
						<u-col span="2">
							<u-text :text="'记录名称'+i.id" align="center" size="12"></u-text>
						</u-col>
						<u-col span="3.5" style="flex-direction: row;">
							<u-text :text="i.leftFront+'kPa'" align="center" size="12" :color="(i.leftFront < 2.1 || i.leftFront > 3) ? '#fc6238' : '#00d699'"></u-text>
							<u-text text="/" align="center" size="12"></u-text>
							<u-text :text="i.leftRear+'kPa'" align="center" size="12" :color="(i.leftRear < 2.1 || i.leftRear > 3) ? '#fc6238' : '#00d699'"></u-text>
							<u-text text="/" align="center" size="12"></u-text>
							<u-text :text="i.rightFront+'kPa'" align="center" size="12" :color="(i.rightFront < 2.1 || i.rightFront > 3) ? '#fc6238' : '#00d699'"></u-text>
							<u-text text="/" align="center" size="12"></u-text>
							<u-text :text="i.rightRear+'kPa'" align="center" size="12" :color="(i.rightRear < 2.1 || i.rightRear > 3) ? '#fc6238' : '#00d699'"></u-text>
						</u-col>
						<u-col span="2">
							<u-text :text="i.tyreCondition == 0 ? '正常' : '异常'" align="center" size="12"
								:color="i.tyreCondition != 0 ?'#fc6238' : '#00d699'">
							</u-text>
						</u-col>
						<u-col span="2">
							<u-text :text="i.alarm == 0 ? '是' : '否'" align="center" size="12"></u-text>
						</u-col>
						<u-col span="2.5">
							<u-text :text="i.createTime" align="center" size="12"></u-text>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<bottom></bottom>
	</view>
</template>

<script>
	import bottom from "@/components/bottom/index.vue"
	import { getPressureList } from '@/config/api/car.js';
	export default {
		components: {
			bottom
		},
		data() {
			return {
				//检测记录
				pressureList:{},
			}
		},
		mounted() {
			getPressureList(100).then(res => {
				this.pressureList = res.rows
			})
		},
		methods: {
			backIndex(){
				uni.redirectTo({
					url:"/pages/vehicleInformation/index"
				})
			}
		}
	}
</script>

<style scoped>
	.history {
		width: calc(100% - 70px);
		height: 100%;
		margin: 0 auto;
	}

	.back {
		height: 27rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, .3);
		border: 1px solid #FFF;
	}

	/* 外层 */
	.outer {
		width: 100%;
		height: 75%;
		background-color: rgba(255, 255, 255, .3);
		border-radius: 9px;
		padding: 2%;
		box-sizing: border-box;
		margin-top: 10rpx;
	}

	/* 内层 */
	.container {
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, .5);
		border-radius: 9px;
		padding: 1%;
		box-sizing: border-box;
		
	}
	.content{
		height: 95%;
		overflow-x: auto;
	}
	.item {
		margin-top: 10rpx;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #ecf3f7;
	}
</style>